<template>
  <div class="person3">
    姓：<input type="text" v-model="firstName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    <button @click="changeFullName">将全名改为li-si</button>
    全名：<span>{{ fullName }}</span>
  </div>
</template>

<script setup lang="ts" name="Person3">
import {computed, ref} from "vue";

let firstName = ref('张');
let lastName = ref('三');

// 这么定义的 fullName 是一个计算属性，且是一个只读的计算属性
// let fullName: ComputedRef<string> = computed((): string => {
//   return `${firstName.value} - ${lastName.value}`;
// });

// 这么定义的 fullName 是一个计算属性，可读可写
let fullName = computed({
  get: (): string => {
    return `${firstName.value} - ${lastName.value}`;
  },
  set: (value: string) => {
    let [str1, str2] = value.split('-');
    firstName.value = str1;
    lastName.value = str2;
  }
});

// 方法
const changeFullName = (): void => {
  fullName.value = 'li-si';
};
</script>

<style scoped lang="scss">
.person3 {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
}
</style>
